<template>
  <div class="baseForm">
    <el-form
      :model="formValue"
      :rules="rules"
      v-bind="$attrs"
    >
      <template v-for="temp in baseFormTemp">
        <!-- <el-form-item
          :label="temp.label"
          :prop="temp.name"
        >
          <component
            :is="temp.compName"
            v-bind="temp.props"
            :style="temp.style"
            :class="temp.class"
            :formValue.sync="baseFormValue[temp.name]"
            @change="(val) => { temp.change && temp.change(val) }"
          ></component>
        </el-form-item> -->

        <div
          :class="[
            'temp-item',
            temp.inline ? 'inline' : '',
            temp.class
          ]"
          :style="temp.style"
        >
          <div :class="[
            'label',
            temp.required ? 'valid-require' : ''
          ]">
            {{ temp.label }}
          </div>
          <component
            :is="temp.compName"
            v-bind="temp.props"
            :formValue.sync="baseFormValue[temp.name]"
            @change="(val) => { temp.change && temp.change(val) }"
          >
          </component>
          <div v-if="temp.unit" class="unit">{{ temp.unit }}</div>
        </div>
      </template>
    </el-form>
  </div>
</template>

<script>
import extendsMixins from './extends.js';

import UInput from './components/UInput';
import USelect from './components/USelect';
import UDatePicker from './components/UDatePicker';
import UCheckbox from './components/UCheckbox';
import UUpload from './components/UUpload';
import USwitch from './components/USwitch';
import URadio from './components/URadio';

export default {
  name: 'BaseForm',
  mixins: [
    extendsMixins
  ],
  components: {
    'u-input': UInput,
    'u-select': USelect,
    'u-datePicker': UDatePicker,
    'u-checkbox': UCheckbox,
    'u-upload': UUpload,
    'u-switch': USwitch,
    'u-radio': URadio,
  },
  props: {
    // 表单配置
    baseFormTemp: {
      type: Array,
      default: () => []
    },
    // 表单数据对象
    baseFormValue: {
      type: Object,
      default: () => ({})
    },
    // 数据验证规则
    rules: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      comps: {
        'input': this.renderInput,
        'select': this.renderSelect,
        'datePicker': this.renderDatePicker,
        'upload': this.renderUpload,
        'checkbox': this.renderCheckbox,
        'switch': this.renderSwitch,
        'radio': this.renderRadio,
      },
      formConfig: [],
      formValue: {}
    }
  },
  methods: {
    // TODO:提交表单
    formSubmit() {
      this.$refs['formRef'].validate(valid => {
        if (valid) {
          alert('submit!');
          this.$emit('onSubmit', this.formValue);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
  render(createElement, ctx) {
    // console.log(ctx)
    this.formConfig = this.baseFormTemp;
    this.formValue = this.baseFormValue;

    return createElement(
      'el-form',
      {
        ref: 'formRef',
        props: {
          model: this.formValue,
          rules: this.rules,
          ...this.$attrs
        }
      },
      [
        ...this.formConfig.map(item => {
          const renderType = () => {
            let temp = null;
            if (this.comps[item.compName]) {
              temp = this.comps[item.compName](createElement, item, this.formValue);
            }

            return temp;
            // return this.comps[item.compName] 
            // && this.comps[item.compName](createElement, item, this.formValue)
          };

          return createElement(
            'el-form-item',
            {
              props: {
                label: item.label,
                prop: item.name
              }
            },
            [
              renderType()
            ] 
          )
        }),
        // createElement(
        //   'el-form-item', 
        //   {
        //     props: {
        //       label: '活动'
        //     }
        //   },
        //   [
        //     createElement(
        //       'UInput',
        //       {
        //         props: {
        //           // itemValue: this.formValue.input,
        //           config: {
        //             props: {
        //               value: this.formValue.input,
        //               // disabled: true
        //             }
        //           }
        //         },
        //         on: {
        //           change: (val) => {
        //             this.formValue.input = val;
        //           }
        //         }
        //       }
        //     ),
        //   ]
        // ),
        // createElement(
        //   'el-form-item', 
        //   {
        //     props: {
        //       label: '活动'
        //     }
        //   },
        //   [
        //     createElement(
        //       'USelect',
        //       {
        //         props: {
        //           itemValue: this.formValue.select,
        //           config: {
        //             // disabled: true,
        //             options: [
        //               {
        //                 label: 'hello',
        //                 value: 1
        //               },
        //               {
        //                 label: 'hello1',
        //                 value: 2
        //               }
        //             ]
        //           }
        //         },
        //         on: {
        //           change: (val) => {
        //             this.formValue.select = val;
        //           }
        //         }
        //       }
        //     ),
        //   ]
        // ),

        // createElement(
        //   'el-button',
        //   {
        //     on: {
        //       click: () => {
        //         return this.formSubmit();
        //       }
        //     }
        //   },
        //   '提交'
        // ),

      ]
    );
  }
}
</script>

<style lang="scss" scoped>
.baseForm {
  .temp-item {
    margin: 5px 0;
    .label {
      margin: 10px 0;
      padding-right: 10px;
      display: inline-block;
    }

    &.inline {
      display: inline-block;
    }

    .unit {
      display: inline-block;
      margin-left: 10px;
    }
  }
}

.valid-require {
  position: relative;
}
.valid-require::before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
</style>